﻿body,
html,
ul,
li,
a,
img,
div {
  padding: 0;
  margin: 0;
}
body {
  font-size: 18px;
  font-family: "trebuchet ms", helvetica, sans-serif;
  letter-spacing: -1px;
}
body a {
  text-decoration: none;
  color: black;
}
body div.wrapper {
  position: absolute;
  height: 202px;
  width: 142px;
  top: 50%;
  left: 50%;
  margin-top: -100px;
  margin-left: -70px;
}
body div.wrapper ul.radial {
  z-index: 100;
  list-style-type: none;
  position: relative;
}
body div.wrapper ul.radial > li > a {
  /*book anchor*/

  border: 1px solid black;
  display: block;
  width: 140px;
  height: 200px;
  background: #ddd;
  border-radius: 5px;
  overflow: hidden;
  text-align: center;
  -webkit-box-shadow: 15px 15px 15px rgba(0, 0, 0, 0.2);
  box-shadow: 15px 15px 15px rgba(0, 0, 0, 0.2);
}
body div.wrapper ul.radial ul {
  /*chapters list*/

  z-index: -1;
  list-style-type: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 140px;
  height: 200px;
}
body div.wrapper ul.radial ul li {
  /*chapters items*/

  position: absolute;
  width: 240px;
  height: 240px;
  left: -50px;
  top: -20px;
  /* SECOND LINE */

}
body div.wrapper ul.radial ul li a {
  /*chapters anchor*/

  position: absolute;
  display: block;
  width: 110px;
  height: 50px;
  padding-top: 27px;
  border-radius: 50px;
  color: #000;
  background: #ddd;
  text-align: center;
  background-image: -webkit-radial-gradient(circle cover, #ffffff, rgba(255, 255, 255, 0) 100%);
  background-image: -moz-radial-gradient(circle cover, #ffffff, rgba(255, 255, 255, 0) 100%);
  background-image: -ms-radial-gradient(circle cover, #ffffff, rgba(255, 255, 255, 0) 100%);
  background-image: -o-radial-gradient(circle cover, #ffffff, rgba(255, 255, 255, 0) 100%);
  background-image: radial-gradient(circle cover, #ffffff, rgba(255, 255, 255, 0) 100%);
  opacity: 0.9;
  -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
}
body div.wrapper ul.radial ul li:nth-child(1) {
  border: 3px solid #aedf89;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
}
body div.wrapper ul.radial ul li:nth-child(1) a {
  top: -90px;
  left: -90px;
  color: #738694;
  font-style: italic;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
}
body div.wrapper ul.radial ul li:nth-child(2) {
  border: 3px solid #aedf89;
  -webkit-transform: rotate(26deg);
  -moz-transform: rotate(26deg);
  -ms-transform: rotate(26deg);
  -o-transform: rotate(26deg);
  transform: rotate(26deg);
}
body div.wrapper ul.radial ul li:nth-child(2) a {
  top: -90px;
  left: -90px;
  -webkit-transform: rotate(-26deg);
  -moz-transform: rotate(-26deg);
  -ms-transform: rotate(-26deg);
  -o-transform: rotate(-26deg);
  transform: rotate(-26deg);
}
body div.wrapper ul.radial ul li:nth-child(3) {
  border: 3px solid #aedf89;
  -webkit-transform: rotate(52deg);
  -moz-transform: rotate(52deg);
  -ms-transform: rotate(52deg);
  -o-transform: rotate(52deg);
  transform: rotate(52deg);
}
body div.wrapper ul.radial ul li:nth-child(3) a {
  top: -90px;
  left: -90px;
  -webkit-transform: rotate(-52deg);
  -moz-transform: rotate(-52deg);
  -ms-transform: rotate(-52deg);
  -o-transform: rotate(-52deg);
  transform: rotate(-52deg);
}
body div.wrapper ul.radial ul li:nth-child(4) {
  border: 3px solid #aedf89;
  -webkit-transform: rotate(78deg);
  -moz-transform: rotate(78deg);
  -ms-transform: rotate(78deg);
  -o-transform: rotate(78deg);
  transform: rotate(78deg);
}
body div.wrapper ul.radial ul li:nth-child(4) a {
  top: -90px;
  left: -90px;
  -webkit-transform: rotate(-78deg);
  -moz-transform: rotate(-78deg);
  -ms-transform: rotate(-78deg);
  -o-transform: rotate(-78deg);
  transform: rotate(-78deg);
}
body div.wrapper ul.radial ul li:nth-child(5) {
  border: 3px solid #aedf89;
  -webkit-transform: rotate(104deg);
  -moz-transform: rotate(104deg);
  -ms-transform: rotate(104deg);
  -o-transform: rotate(104deg);
  transform: rotate(104deg);
}
body div.wrapper ul.radial ul li:nth-child(5) a {
  top: -90px;
  left: -90px;
  -webkit-transform: rotate(-104deg);
  -moz-transform: rotate(-104deg);
  -ms-transform: rotate(-104deg);
  -o-transform: rotate(-104deg);
  transform: rotate(-104deg);
}
body div.wrapper ul.radial ul li:nth-child(6) {
  border: 3px solid #aedf89;
  -webkit-transform: rotate(130deg);
  -moz-transform: rotate(130deg);
  -ms-transform: rotate(130deg);
  -o-transform: rotate(130deg);
  transform: rotate(130deg);
}
body div.wrapper ul.radial ul li:nth-child(6) a {
  top: -90px;
  left: -90px;
  -webkit-transform: rotate(-130deg);
  -moz-transform: rotate(-130deg);
  -ms-transform: rotate(-130deg);
  -o-transform: rotate(-130deg);
  transform: rotate(-130deg);
}
body div.wrapper ul.radial ul li:nth-child(7) {
  border: 3px solid #aedf89;
  -webkit-transform: rotate(156deg);
  -moz-transform: rotate(156deg);
  -ms-transform: rotate(156deg);
  -o-transform: rotate(156deg);
  transform: rotate(156deg);
}
body div.wrapper ul.radial ul li:nth-child(7) a {
  top: -90px;
  left: -90px;
  -webkit-transform: rotate(-156deg);
  -moz-transform: rotate(-156deg);
  -ms-transform: rotate(-156deg);
  -o-transform: rotate(-156deg);
  transform: rotate(-156deg);
}
body div.wrapper ul.radial ul li:nth-child(8) {
  border: 3px solid #aedf89;
  -webkit-transform: rotate(182deg);
  -moz-transform: rotate(182deg);
  -ms-transform: rotate(182deg);
  -o-transform: rotate(182deg);
  transform: rotate(182deg);
}
body div.wrapper ul.radial ul li:nth-child(8) a {
  top: -90px;
  left: -90px;
  -webkit-transform: rotate(-182deg);
  -moz-transform: rotate(-182deg);
  -ms-transform: rotate(-182deg);
  -o-transform: rotate(-182deg);
  transform: rotate(-182deg);
}
body div.wrapper ul.radial ul li:nth-child(9) {
  border: 3px solid #aedf89;
  -webkit-transform: rotate(208deg);
  -moz-transform: rotate(208deg);
  -ms-transform: rotate(208deg);
  -o-transform: rotate(208deg);
  transform: rotate(208deg);
}
body div.wrapper ul.radial ul li:nth-child(9) a {
  top: -90px;
  left: -90px;
  -webkit-transform: rotate(-208deg);
  -moz-transform: rotate(-208deg);
  -ms-transform: rotate(-208deg);
  -o-transform: rotate(-208deg);
  transform: rotate(-208deg);
}
body div.wrapper ul.radial ul li:nth-child(10) {
  border: 3px solid #aedf89;
  -webkit-transform: rotate(234deg);
  -moz-transform: rotate(234deg);
  -ms-transform: rotate(234deg);
  -o-transform: rotate(234deg);
  transform: rotate(234deg);
}
body div.wrapper ul.radial ul li:nth-child(10) a {
  top: -90px;
  left: -90px;
  -webkit-transform: rotate(-234deg);
  -moz-transform: rotate(-234deg);
  -ms-transform: rotate(-234deg);
  -o-transform: rotate(-234deg);
  transform: rotate(-234deg);
}
body div.wrapper ul.radial ul li:nth-child(11) {
  border: 3px solid #aedf89;
  -webkit-transform: rotate(260deg);
  -moz-transform: rotate(260deg);
  -ms-transform: rotate(260deg);
  -o-transform: rotate(260deg);
  transform: rotate(260deg);
}
body div.wrapper ul.radial ul li:nth-child(11) a {
  top: -90px;
  left: -90px;
  -webkit-transform: rotate(-260deg);
  -moz-transform: rotate(-260deg);
  -ms-transform: rotate(-260deg);
  -o-transform: rotate(-260deg);
  transform: rotate(-260deg);
}
body div.wrapper ul.radial ul li:nth-child(12) {
  border: 3px solid #aedf89;
  -webkit-transform: rotate(286deg);
  -moz-transform: rotate(286deg);
  -ms-transform: rotate(286deg);
  -o-transform: rotate(286deg);
  transform: rotate(286deg);
}
body div.wrapper ul.radial ul li:nth-child(12) a {
  top: -90px;
  left: -90px;
  -webkit-transform: rotate(-286deg);
  -moz-transform: rotate(-286deg);
  -ms-transform: rotate(-286deg);
  -o-transform: rotate(-286deg);
  transform: rotate(-286deg);
}
body div.wrapper ul.radial ul li:nth-child(13) {
  border: 3px solid #aedf89;
  -webkit-transform: rotate(312deg);
  -moz-transform: rotate(312deg);
  -ms-transform: rotate(312deg);
  -o-transform: rotate(312deg);
  transform: rotate(312deg);
}
body div.wrapper ul.radial ul li:nth-child(13) a {
  top: -90px;
  left: -90px;
  -webkit-transform: rotate(-312deg);
  -moz-transform: rotate(-312deg);
  -ms-transform: rotate(-312deg);
  -o-transform: rotate(-312deg);
  transform: rotate(-312deg);
}
body div.wrapper ul.radial ul li:nth-child(14) {
  border: 3px solid #aedf89;
  -webkit-transform: rotate(338deg);
  -moz-transform: rotate(338deg);
  -ms-transform: rotate(338deg);
  -o-transform: rotate(338deg);
  transform: rotate(338deg);
}
body div.wrapper ul.radial ul li:nth-child(14) a {
  top: -90px;
  left: -90px;
  -webkit-transform: rotate(-338deg);
  -moz-transform: rotate(-338deg);
  -ms-transform: rotate(-338deg);
  -o-transform: rotate(-338deg);
  transform: rotate(-338deg);
}
body div.wrapper ul.radial ul li:nth-child(15) {
  border: none;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
}
body div.wrapper ul.radial ul li:nth-child(15) a {
  top: -170px;
  left: -170px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
}
body div.wrapper ul.radial ul li:nth-child(16) {
  border: none;
  -webkit-transform: rotate(26deg);
  -moz-transform: rotate(26deg);
  -ms-transform: rotate(26deg);
  -o-transform: rotate(26deg);
  transform: rotate(26deg);
}
body div.wrapper ul.radial ul li:nth-child(16) a {
  top: -170px;
  left: -170px;
  -webkit-transform: rotate(-26deg);
  -moz-transform: rotate(-26deg);
  -ms-transform: rotate(-26deg);
  -o-transform: rotate(-26deg);
  transform: rotate(-26deg);
}
body div.wrapper ul.radial ul li:nth-child(17) {
  border: none;
  -webkit-transform: rotate(52deg);
  -moz-transform: rotate(52deg);
  -ms-transform: rotate(52deg);
  -o-transform: rotate(52deg);
  transform: rotate(52deg);
}
body div.wrapper ul.radial ul li:nth-child(17) a {
  top: -170px;
  left: -170px;
  -webkit-transform: rotate(-52deg);
  -moz-transform: rotate(-52deg);
  -ms-transform: rotate(-52deg);
  -o-transform: rotate(-52deg);
  transform: rotate(-52deg);
}
body div.wrapper ul.radial ul li:nth-child(18) {
  border: none;
  -webkit-transform: rotate(78deg);
  -moz-transform: rotate(78deg);
  -ms-transform: rotate(78deg);
  -o-transform: rotate(78deg);
  transform: rotate(78deg);
}
body div.wrapper ul.radial ul li:nth-child(18) a {
  top: -170px;
  left: -170px;
  -webkit-transform: rotate(-78deg);
  -moz-transform: rotate(-78deg);
  -ms-transform: rotate(-78deg);
  -o-transform: rotate(-78deg);
  transform: rotate(-78deg);
}
body div.wrapper ul.radial ul li:nth-child(19) {
  border: none;
  -webkit-transform: rotate(104deg);
  -moz-transform: rotate(104deg);
  -ms-transform: rotate(104deg);
  -o-transform: rotate(104deg);
  transform: rotate(104deg);
}
body div.wrapper ul.radial ul li:nth-child(19) a {
  top: -170px;
  left: -170px;
  -webkit-transform: rotate(-104deg);
  -moz-transform: rotate(-104deg);
  -ms-transform: rotate(-104deg);
  -o-transform: rotate(-104deg);
  transform: rotate(-104deg);
}
body div.wrapper ul.radial ul li:nth-child(20) {
  border: none;
  -webkit-transform: rotate(130deg);
  -moz-transform: rotate(130deg);
  -ms-transform: rotate(130deg);
  -o-transform: rotate(130deg);
  transform: rotate(130deg);
}
body div.wrapper ul.radial ul li:nth-child(20) a {
  top: -170px;
  left: -170px;
  -webkit-transform: rotate(-130deg);
  -moz-transform: rotate(-130deg);
  -ms-transform: rotate(-130deg);
  -o-transform: rotate(-130deg);
  transform: rotate(-130deg);
}
body div.wrapper ul.radial ul li:nth-child(21) {
  border: none;
  -webkit-transform: rotate(156deg);
  -moz-transform: rotate(156deg);
  -ms-transform: rotate(156deg);
  -o-transform: rotate(156deg);
  transform: rotate(156deg);
}
body div.wrapper ul.radial ul li:nth-child(21) a {
  top: -170px;
  left: -170px;
  -webkit-transform: rotate(-156deg);
  -moz-transform: rotate(-156deg);
  -ms-transform: rotate(-156deg);
  -o-transform: rotate(-156deg);
  transform: rotate(-156deg);
}
body div.wrapper ul.radial ul li:nth-child(22) {
  border: none;
  -webkit-transform: rotate(182deg);
  -moz-transform: rotate(182deg);
  -ms-transform: rotate(182deg);
  -o-transform: rotate(182deg);
  transform: rotate(182deg);
}
body div.wrapper ul.radial ul li:nth-child(22) a {
  top: -170px;
  left: -170px;
  -webkit-transform: rotate(-182deg);
  -moz-transform: rotate(-182deg);
  -ms-transform: rotate(-182deg);
  -o-transform: rotate(-182deg);
  transform: rotate(-182deg);
}
body div.wrapper ul.radial ul li:nth-child(23) {
  border: none;
  -webkit-transform: rotate(208deg);
  -moz-transform: rotate(208deg);
  -ms-transform: rotate(208deg);
  -o-transform: rotate(208deg);
  transform: rotate(208deg);
}
body div.wrapper ul.radial ul li:nth-child(23) a {
  top: -170px;
  left: -170px;
  -webkit-transform: rotate(-208deg);
  -moz-transform: rotate(-208deg);
  -ms-transform: rotate(-208deg);
  -o-transform: rotate(-208deg);
  transform: rotate(-208deg);
}
body div.wrapper ul.radial ul li:nth-child(24) {
  border: none;
  -webkit-transform: rotate(234deg);
  -moz-transform: rotate(234deg);
  -ms-transform: rotate(234deg);
  -o-transform: rotate(234deg);
  transform: rotate(234deg);
}
body div.wrapper ul.radial ul li:nth-child(24) a {
  top: -170px;
  left: -170px;
  -webkit-transform: rotate(-234deg);
  -moz-transform: rotate(-234deg);
  -ms-transform: rotate(-234deg);
  -o-transform: rotate(-234deg);
  transform: rotate(-234deg);
}
body div.wrapper ul.radial ul li:nth-child(25) {
  border: none;
  -webkit-transform: rotate(260deg);
  -moz-transform: rotate(260deg);
  -ms-transform: rotate(260deg);
  -o-transform: rotate(260deg);
  transform: rotate(260deg);
}
body div.wrapper ul.radial ul li:nth-child(25) a {
  top: -170px;
  left: -170px;
  -webkit-transform: rotate(-260deg);
  -moz-transform: rotate(-260deg);
  -ms-transform: rotate(-260deg);
  -o-transform: rotate(-260deg);
  transform: rotate(-260deg);
}
body div.wrapper ul.radial ul li:nth-child(26) {
  border: none;
  -webkit-transform: rotate(286deg);
  -moz-transform: rotate(286deg);
  -ms-transform: rotate(286deg);
  -o-transform: rotate(286deg);
  transform: rotate(286deg);
}
body div.wrapper ul.radial ul li:nth-child(26) a {
  top: -170px;
  left: -170px;
  -webkit-transform: rotate(-286deg);
  -moz-transform: rotate(-286deg);
  -ms-transform: rotate(-286deg);
  -o-transform: rotate(-286deg);
  transform: rotate(-286deg);
}
body div.wrapper ul.radial ul li:nth-child(27) {
  border: none;
  -webkit-transform: rotate(312deg);
  -moz-transform: rotate(312deg);
  -ms-transform: rotate(312deg);
  -o-transform: rotate(312deg);
  transform: rotate(312deg);
}
body div.wrapper ul.radial ul li:nth-child(27) a {
  top: -170px;
  left: -170px;
  -webkit-transform: rotate(-312deg);
  -moz-transform: rotate(-312deg);
  -ms-transform: rotate(-312deg);
  -o-transform: rotate(-312deg);
  transform: rotate(-312deg);
}
body div.wrapper ul.radial ul li:nth-child(28) {
  border: none;
  -webkit-transform: rotate(338deg);
  -moz-transform: rotate(338deg);
  -ms-transform: rotate(338deg);
  -o-transform: rotate(338deg);
  transform: rotate(338deg);
}
body div.wrapper ul.radial ul li:nth-child(28) a {
  top: -170px;
  left: -170px;
  color: #738694;
  font-style: italic;
  -webkit-transform: rotate(-338deg);
  -moz-transform: rotate(-338deg);
  -ms-transform: rotate(-338deg);
  -o-transform: rotate(-338deg);
  transform: rotate(-338deg);
}
